<template>
  <div class="dashboard-container">
    <div class="detailHearder">
      <div style="flex:1">渠道商号: 23423102</div>
      <div>
        <el-button size="mini">禁用</el-button>
        <el-button size="mini">删除</el-button>
        <el-button size="mini" type="primary">编辑基本信息</el-button>
      </div>
    </div>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="8">名称：北京移动</el-col>
      <el-col :span="8">张三：北京移动</el-col>
      <el-col :span="8">联系电话：北京移动</el-col>
      <el-col :span="8">是否有效：北京移动</el-col>
    </el-row>
    <div>支持的门店</div>
    <el-divider></el-divider>
    <div class="searchBox">
      <el-button type="primary" size="mini" @click="onAdd">新增</el-button>
      <el-button size="mini">批量设置门店</el-button>
      <div class="inputSearch">
        <el-input size="mini" v-model="input" placeholder="请输入门店名称"></el-input>
      </div>

      <el-button size="mini" type="primary">搜索</el-button>
    </div>
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
      <el-table-column prop="name" label="门店编号"></el-table-column>
      <el-table-column prop="name" label="门店名称"></el-table-column>
      <el-table-column prop="name" label="门店省份"></el-table-column>
      <el-table-column prop="name" label="门店城市"></el-table-column>
      <el-table-column prop="name" label="备注"></el-table-column>
      <el-table-column prop="name" label="支持日期段"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="onSubmit">取消支持</el-button>
          <el-button type="text" @click="onSubmit">修改日期段</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="新增渠道支持的门店" :visible.sync="dialogAdd" width="40%">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-row>
          <el-col :span="24">
            <el-form-item label="支持时间段：">
              <el-date-picker
                size="mini"
                v-model="value1"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="名称：">
              <el-transfer v-model="arr" :data="data"></el-transfer>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogAdd = false">取 消</el-button>

        <el-button size="mini" type="primary" @click="dialogAdd = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    const generateData = _ => {
      const data = []
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: i % 4 === 0
        })
      }
      return data
    }
    return {
      input: '',
      dialogAdd: false,
      arr: '',
      data: generateData(),
      value1: '',
      formInline: {},
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ]
    }
  },
  methods: {
    onSubmit() {
      this.$notify({
        title: '成功',
        message: '这是一条成功的提示消息',
        type: 'success'
      })
    },
    onAdd() {
      this.dialogAdd = true
    }
  }
}
</script>

<style lang="scss" scoped>
.el-col {
  margin-bottom: 20px;
}
.searchBox {
  display: flex;
  .inputSearch {
    margin-left: 20px;
    width: 300px;
  }
}
.dashboard {
  &-container {
    margin: 30px;
    .detailHearder {
      display: flex;
      align-items: center;
    }
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
